<template>
    <el-container class="layout-container-demo">
        <!--TODO-->
        <!--目前组件数据为写死的状态，之后应改成后端配置的状态-->
        <!--position|z-index是为了后面的层级关系-->
        <el-aside :style="{'width':width, 'transition':'width 0.5s','position':'relactive','z-index':'2'}">
            <h1><img src="../assets/bird.ico" alt="">地铁故障系统</h1>
            <el-scrollbar>
                <el-menu
                    class="new-el-menu--sidebar"
                    active-text-color="#ffd04b"
                    background-color="#001529"
                    text-color="#fff"
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    unique-opened
                    router
                >
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <monitor/>
                            </el-icon>
                            <span>控制面板</span>
                        </template>
                        <el-menu-item index="1-1">数据面板</el-menu-item>
                        <el-menu-item index="1-2">用户详情</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <message/>
                            </el-icon>
                            <span>表单操作</span>
                        </template>
                        <!--权限分级-->
                        <el-menu-item index="2-1" @click="go('/formmain')">表单总览</el-menu-item>
                        <el-menu-item index="2-2" @click="go('/formsubmit')">提交表单</el-menu-item>
                        <el-menu-item index="2-3" @click="go('/form3')">待审批表单<div class="badge">1</div></el-menu-item>
                        <el-menu-item index="2-4" @click="go('/form4')">驳回表单<div class="badge">1</div></el-menu-item>
                        <el-menu-item v-if="false" index="2-5" @click="go('/form5')">完成表单<div class="badge">1</div></el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon>
                                <setting/>
                            </el-icon>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item index="3-1" @click="go('/account')">账号管理</el-menu-item>
                        <el-menu-item index="3-2" @click="go('/role')">角色管理</el-menu-item>
                        <el-menu-item index="3-3" @click="go('/department')">部门管理</el-menu-item>
                        <el-menu-item index="3-3" @click="go('/menu')">菜单管理</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon>
                                <key/>
                            </el-icon>
                            <span>权限管理</span>
                        </template>
                        <el-menu-item index="4-1">页面权限</el-menu-item>
                        <el-menu-item index="4-2">按钮权限</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-scrollbar>
        </el-aside>
        <el-container>
            <el-header>
                <div class="toolbar">
                    <div class="left">
                        <el-icon @click="FoldorExpend" :size="20" class="icon_fold_expend">
                            <fold v-if="isCollapse===false"/>
                            <expand v-if="isCollapse===true"/>
                        </el-icon>
                        <!--TODO
                        之后会重构这个部分的数据-->
                        <!--目前此处为虚假数据-->
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                            <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <el-icon class="icon" :size="25">
                        <search/>
                    </el-icon>
                    <el-dropdown>
                        <el-icon class="icon" :size="25">
                            <!--先添加红点内容未完善-->
                            <el-badge is-dot class="item">
                                <chatRound/>
                            </el-badge>
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>View</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-dropdown>
                        <div class="icon">
                            <span>Tom</span>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item >用户详情</el-dropdown-item>
                                <el-dropdown-item @click="Edit">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-dropdown>
                        <el-icon :size="25">
                            <setting/>
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>View</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-divider/>
            <!--TODO-->
            <!--后期会会加入动态数据-->
            <!--目前为写死的数据-->
            <div class="el-tag-wrapper">
                <el-tag
                    v-for="tag in tags"
                    :key="tag.name"
                    closable
                    :type="tag.type">
                    {{tag.name}}
                </el-tag>
            </div>
            <el-divider/>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import {Ref, ref} from 'vue';
import {ChatRound,Key, Search, Fold, Message, Setting, Monitor, Expand } from '@element-plus/icons-vue';
import {Router, useRouter} from 'vue-router';

const router: Router = useRouter();

//侧边栏是否展开
let isCollapse: Ref<boolean> = ref(false);
let width: Ref<string> = ref('200px');

function FoldorExpend() {
    isCollapse.value = !isCollapse.value;
    if (isCollapse.value === true) {
        width.value = '58' + 'px';
    } else {
        width.value = '200' + 'px';
    }
}
//退出
function Edit() {
    localStorage.removeItem('token');
    router.push('/login');
}
//标签
const tags = ref([
    { name: 'Tag 1', type: '' },
    { name: 'Tag 2', type: 'success' },
    { name: 'Tag 3', type: 'info' },
    { name: 'Tag 4', type: 'warning' },
    { name: 'Tag 5', type: 'danger' },
])
//跳转
function go(route:string):void{
    router.push(route);
}
</script>

<style scoped lang="scss">
.layout-container-demo {
    height: 100%;

    .el-aside {
        overflow-x: hidden;
        color: var(--el-text-color-primary);
        background: #001529;
        width: 200px;

        h1 {
            font-size: 14px;
            font-weight: 700;
            width: 200px;
            color: white;
            height: 60px;
            margin-left: 10px;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            img {
                margin: 0 8px;
            }
        }

        .el-scrollbar {
            width: 100%;
            height: calc(100% - 60px);
            // 解决侧边栏折叠卡顿的问题
            .new-el-menu--sidebar{
                border-right: none;
            }
            .new-el-menu--sidebar:not(.el-menu--collapse) {
                width: 100%;
                height: 100%;
            }
            .badge{
                margin-left: 10px;
                width:20px;
                height:20px;
                line-height:20px;
                border-radius: 50%;
                background: #ff0000;
                color:#ffffff;
            }
            .badge:hover{
               border: 1px solid #ffffff;
            }
        }
    }

    .el-container {
        .el-tag-wrapper{
            text-align: left;
            margin-left: 10px;
            *{
                margin-right: 10px;
            }
        }
        .el-divider{
            margin: 2px 0;
        }
        .el-header {
            position: relative;
            background-color: #ffffff;
            color: #000000;
            text-align: right;
            font-size: 12px;
            position: relative;

            .toolbar {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                right: 20px;

                .left {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    position: absolute;
                    left: 8px;

                    .icon_fold_expend {
                        margin-right: 10px;
                    }

                    .icon_fold_expend:hover {
                        background: #555555;
                        color: #ffffff;
                    }
                }

                .icon {
                    margin-right: 15px;
                    margin-top: 1px;
                }
            }
        }

        .el-main {
            padding: 0;
            background: #f0f2f5;
            overflow: auto;
        }
    }
}

.item {
    margin-top: 1px;
    margin-right: 4px;
}
</style>
